<template>
  <div class="login">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules" status-icon>
      <img src="../assets/01.jpg" alt />
      <el-form-item label="账 号" prop="username">
        <el-input @keyup.enter.native="login" v-model="form.username" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="密 码" prop="password">
        <el-input
          @keyup.enter.native="login"
          v-model="form.password"
          placeholder="请输入密码"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="loginBtn" type="primary" @click="login">登录</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: ['blur', 'change'] },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: ['blur', 'change'] }
        ]

      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    resetForm () {
      this.$refs.form.resetFields()
    },
    async login () {
      try {
        await this.$refs.form.validate()
        const { meta, data } = await this.$axios.post('login', this.form)
        if (meta.status === 200) {
          // console.log(res)
          localStorage.setItem('token', data.token)
          this.$message({
            message: meta.msg,
            type: 'success',
            duration: 1000
          })
          this.$router.push('/index')
        } else {
          // console.log(meta.msg)
          this.$message({
            message: meta.msg,
            type: 'error',
            duration: 1000
          })
        }
      } catch (e) {
        console.log(e)
      }
      // this.$refs.form.validate((isValid, obj) => {
      //   if (!isValid) return
      //   // axios({
      //   //   method: 'post',
      //   //   url: 'http://localhost:8888/api/private/v1/login',
      //   //   data: this.form
      //   // }).then(res => {
      //   //   if (res.data.meta.status === 200) {
      //   //     console.log(res.data.meta.msg)
      //   //   } else {
      //   //     console.log(res.data.meta.msg)
      //   //   }
      //   // })
      //   // 优化写法
      //   this.$axios.post('login', this.form).then(res => {
      //     const { meta, data } = res
      //     if (meta.status === 200) {
      //       // console.log(res)
      //       localStorage.setItem('token', data.token)
      //       this.$message({
      //         message: meta.msg,
      //         type: 'success',
      //         duration: 1000
      //       })
      //       this.$router.push('/index')
      //     } else {
      //       // console.log(meta.msg)
      //       this.$message({
      //         message: meta.msg,
      //         type: 'error',
      //         duration: 1000
      //       })
      //     }
      //   })
      // })
    }
  }
}
</script>

<style lang='scss'>
.login {
  width: 100%;
  height: 100%;
  list-style: none;
  background-color: #2d434c;
  overflow: hidden;
  .el-form {
    width: 400px;
    background-color: #fff;
    margin: 200px auto 0;
    padding: 75px 20px 20px;
    border-radius: 20px;
    position: relative;
    img {
      width: 120px;
      height: 120px;
      position: absolute;
      left: 50%;
      top: -70px;
      transform: translateX(-50%);
      border-radius: 50%;
      border: 5px solid #fff;
    }
    .loginBtn {
      margin-right: 80px;
    }
  }
}
</style>
